<template>
    <div>
        <SuperTable ref="table" path="/project/registration/index" :params="params" :columns="columns" @on-selection-change="handleSelectionChange">
            <div slot="header-right">
                <Form ref="filter" :model="filter" inline>
                    <FormItem label="关键词">
                        <Input v-model="filter.keywords" style="width:200px" clearable placeholder="项目名称、手机号" />
                    </FormItem>
                    <FormItem label="登记类型" prop="type">
                        <Select v-model="filter.type" clearable style="width: 100px">
                            <Option :value="1">开售提醒</Option>
                            <Option :value="2">缺货登记</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="是否通知" prop="is_notify">
                        <Select v-model="filter.is_notify" clearable style="width: 80px">
                            <Option :value="1">已通知</Option>
                            <Option :value="0">未通知</Option>
                        </Select>
                    </FormItem>
                    <Button type="primary" @click="handlFilter">筛选</Button>
                </Form>
            </div>
            <div slot="page-left">
                <Button type="primary" :disabled="selecteds.length == 0 || isWait == true" @click="handleBatchNotify">批量通知</Button>
                <Button type="error" :disabled="selecteds.length == 0 || isWait == true" @click="handleBatchDel">批量删除</Button>
            </div>
        </SuperTable>
        <Spin size="large" fix v-if="isWait"></Spin>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
export default {
    components: {
        SuperTable
    },
    data() {
        return {
            isWait: false,
            selecteds: [],
            filter: {
                type: '',
                keywords: '',
                is_notify: ''
            },
            params: {
                keywords: '',
                type: '',
                is_notify: '',
                pageSize: 10,
            },
            columns: [
                {
                    type: 'selection',
                    fixed: 'left',
                    width: 50,
                    align: 'center',
                    _disabled: true
                },
                {
                    title: '项目名称',
                    key: 'project_name'
                },
                {
                    title: '手机号',
                    key: 'phone'
                },
                {
                    title: '登记类型',
                    key: 'type_text'
                },
                {
                    title: '是否通知',
                    render: (h, params) => {
                        return h('span', params.row.is_notify == 1 ? '已通知' : '未通知');
                    }
                },
                {
                    title: '创建时间',
                    key: 'created_at'
                }
            ]
        };
    },
    methods: {
        handleSelectionChange(selections){
            this.selecteds = selections
        },
        handlFilter() {
            const { filter } = this;
            this.params.type = filter.type;
            this.params.keywords = filter.keywords;
            this.params.is_notify = filter.is_notify;
            this.$refs.table.init();
        },
        handleBatchNotify(){
            let ids = [];
            this.selecteds.map(item =>{
                if (item.is_notify == 0){
                    ids.push(item.id);
                }
            })
            if (ids.length == 0){
                this.$Message.error('请选择未通知的用户进行通知');
                return false;
            }
            this.$Modal.confirm({
                title: "操作提示:",
                content: "<p>已为您筛选出所有未通知的用户，是否确认对这"+ids.length+"位登记用户发出通知?</p>",
                onOk: () => {
                    const msg = this.$Message.loading({
                        content: '正在提交',
                        duration: 0
                    });
                    this.isWait = true;
                    this.$ajax.post('/project/registration/notify', {ids:ids}).then(() => {
                        msg();
                        this.$Message.success('操作成功');
                        setTimeout(() => {
                            this.$refs.table.reload();
                            this.isWait = false;
                        }, 3000)
                    }).catch(err => {
                        msg();
                        this.isWait = false;
                        this.$Message.error(err.message || '操作失败');
                    })
                }
            });
        },
        handleBatchDel(){
            let ids = [];
            this.selecteds.map(item =>{
                ids.push(item.id);
            })
            if (ids.length == 0){
                this.$Message.error('请选择要删除的记录');
                return false;
            }
            this.$Modal.confirm({
                title: "操作提示:",
                content: "<p>是否确认删除这"+ids.length+"条登记记录?</p>",
                onOk: () => {
                    const msg = this.$Message.loading({
                        content: '正在提交',
                        duration: 0
                    });
                    this.isWait = true;
                    this.$ajax.delete('/project/registration/delete', {params: {ids:ids}}).then(() => {
                        msg();
                        this.$Message.success('操作成功');
                        setTimeout(() => {
                            this.$refs.table.reload();
                            this.isWait = false;
                        }, 2000)
                    }).catch(err => {
                        msg();
                        this.isWait = false;
                        this.$Message.error(err.message || '操作失败');
                    })
                }
            });
        },
    }
};
</script>
<style lang="less">
.export-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: hsla(0,0%,100%,.9);
}
.export-loading .img {
  display: block;
  width: 200px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 14px;
  border: 1px solid;
}
/*加载中icon样式*/
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>